<template>
  <div class="personalMes">
    <el-tabs v-model="activeName" stretch>
      <el-tab-pane label="我的杠题" name="1">
        <bar-subject-item :subject-by-search="subjectByCreat" :page-flag="pageFlag" />
      </el-tab-pane>
      <el-tab-pane label="我的收藏" name="2">
        <bar-subject-item :subject-by-search="subjectByStar" :page-flag="pageFlag" />
      </el-tab-pane>
      <el-tab-pane label="我杠过的" name="3">
        <bar-subject-item :subject-by-search="subjectByJoin" :page-flag="pageFlag" />
      </el-tab-pane>
      <el-tab-pane label="我赞过的" name="4">
        <bar-subject-item :subject-by-search="[]" :page-flag="pageFlag" />
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
<script>
import eventBus from '@/api/eventBus';
import { getSubjectByUid, getSubjectByStar, getSubjectByOption } from '@/api/subject.js';
import BarSubjectItem from '../../components/BarSubjectItem';
export default {
  components: { BarSubjectItem },
  data() {
    return {
      activeName: '1',
      subjectByCreat: [],
      subjectByStar: [],
      subjectByJoin: [],
      pageFlag: 5
    };
  },
  created() {
    eventBus.$emit('changeTitle', '杠精成长记');
    this.activeName = this.$route.params.id ? this.$route.params.id.toString() : '1';
  },
  beforeDestroy() {
    eventBus.$emit('changeTitle', '个人中心');
  },
  mounted() {
    this.getSubject();
    this.getStar();
    this.getOptions();
  },
  methods: {
    // 得到用户所创建的问题表
    getSubject() {
      const params = { uid: this.$store.getters.userInfo.uid };
      getSubjectByUid(params).then(res => {
        if (res.data.code === 200) {
          this.subjectByCreat = res.data.data;
        }
      });
    },
    getStar() {
      const params = { uid: this.$store.getters.userInfo.uid };
      getSubjectByStar(params).then(res => {
        if (res.data.code === 200) {
          this.subjectByStar = res.data.data;
        }
      });
    },
    getOptions() {
      const params = { uid: this.$store.getters.userInfo.uid };
      getSubjectByOption(params).then(res => {
        if (res.data.code === 200) {
          const newArray = [];
          const reduceData = res.data.data.reduce((pre, next) => {
            pre.forEach(item => {
              newArray.push(item.qid);
            });
            if (!newArray.includes(next.qid)) {
              pre.push(next);
            }
            return pre;
          }, []);
          this.subjectByJoin = reduceData;
        }
      });
    }
  }
};
</script>
<style lang="scss">
.el-tabs__nav-scroll {
  overflow: hidden;
  background: #fff;
}
.el-tabs__content{
  overflow: auto;
  height: calc(100vh - 115px);
}
.el-tab-pane{
overflow: auto;
}
</style>
